<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title>EditArea - the code editor in a textarea</title>
	<script language="Javascript" type="text/javascript" src="../edit_area/edit_area_full.js"></script>
	<script language="Javascript" type="text/javascript">
		// initialisation
		editAreaLoader.init({
			id: "example_1"	// id of the textarea to transform		
			,start_highlight: true	// if start with highlight
			,allow_resize: "both"
			,allow_toggle: true
			,language: "en"
			,syntax: "php"	
		});
		
		editAreaLoader.init({
			id: "example_2"	// id of the textarea to transform	
			,start_highlight: true
			,allow_toggle: false
			,language: "en"
			,syntax: "html"	
			,toolbar: "search, go_to_line, |, undo, redo, |, select_font, |, syntax_selection, |, change_smooth_selection, highlight, reset_highlight, |, help"
			,syntax_selection_allow: "css,html,js,php,python,vb,xml,c,cpp,basic,pas,brainfuck"
			,is_multi_files: true
			,EA_load_callback: "editAreaLoaded"
		});
		
		editAreaLoader.init({
			id: "example_3"	// id of the textarea to transform	
			,start_highlight: true	
			,font_size: "8"
			,font_family: "verdana, monospace"
			,allow_resize: "y"
			,allow_toggle: false
			,language: "fr"
			,syntax: "css"	
			,toolbar: "new_document, save, load, |, charmap, |, search, go_to_line, |, undo, redo, |, select_font, |, change_smooth_selection, highlight, reset_highlight, |, help"
			,load_callback: "my_load"
			,save_callback: "my_save"
			,plugins: "charmap"
			,charmap_default: "arrows"
				
		});
		
		editAreaLoader.init({
			id: "example_4"	// id of the textarea to transform		
			//,start_highlight: true	// if start with highlight
			//,font_size: "10"	
			,allow_resize: "no"
			,allow_toggle: true
			,language: "de"
			,syntax: "python"
			,load_callback: "my_load"
			,save_callback: "my_save"
			,display: "later"
			,replace_tab_by_spaces: 4
			,min_height: 350
		});
		
		// callback functions
		function my_save(id, content){
			alert("Here is the content of the EditArea '"+ id +"' as received by the save callback function:\n"+content);
		}
		
		function my_load(id){
			editAreaLoader.setValue(id, "The content is loaded from the load_callback function into EditArea");
		}
		
		function test_setSelectionRange(id){
			editAreaLoader.setSelectionRange(id, 100, 150);
		}
		
		function test_getSelectionRange(id){
			var sel =editAreaLoader.getSelectionRange(id);
			alert("start: "+sel["start"]+"\nend: "+sel["end"]); 
		}
		
		function test_setSelectedText(id){
			text= "[REPLACED SELECTION]"; 
			editAreaLoader.setSelectedText(id, text);
		}
		
		function test_getSelectedText(id){
			alert(editAreaLoader.getSelectedText(id)); 
		}
		
		function editAreaLoaded(id){
			if(id=="example_2")
			{
				open_file1();
				open_file2();
			}
		}
		
		function open_file1()
		{
			var new_file= {id: "to\\ é # € to", text: "$authors= array();\n$news= array();", syntax: 'php', title: 'beautiful title'};
			editAreaLoader.openFile('example_2', new_file);
		}
		
		function open_file2()
		{
			var new_file= {id: "Filename", text: "<a href=\"toto\">\n\tbouh\n</a>\n<!-- it's a comment -->", syntax: 'html'};
			editAreaLoader.openFile('example_2', new_file);
		}
		
		function close_file1()
		{
			editAreaLoader.closeFile('example_2', "to\\ é # € to");
		}
		
		function toogle_editable(id)
		{
			editAreaLoader.execCommand(id, 'set_editable', !editAreaLoader.execCommand(id, 'is_editable'));
		}
	
	</script>
</head>
<body>
<h2>EditArea examples</h2>
<p>Retrieve EditArea on <a href='http://sourceforge.net/projects/editarea'>sourceforge</a> or on 
	my personal <a href='http://www.cdolivet.net/index.php?page=editArea'>website</a>.
</p>
<form action='' method='post'>
	<fieldset>
		<legend>Example 1</legend>
		<p>Test in English with php syntax, highlighted, toggle enabled, resize enabled and default toolbar. Also offer the possibility to switch on/off the readonly mode</p>
		<textarea id="example_1" style="height: 350px; width: 100%;" name="test_1">
<?php	
	$authors= array();
	$news= array();
	$query="SELECT author, COUNT(id) as 'nb_news' FROM news_messages GROUP BY author";
	$result=mysql_query($query, $DBnews);
	while($line = mysql_fetch_assoc($result)){
		$authors[$line["author"]]= $line["author"];
		$news[$line["author"]]=$line['nb_news'];
	}
	
	$list= sprintf("('%s')", implode("', '", $authors));
	
	
	$query="SELECT p.people_id, p.name, p.fname, p.status, team_name, t.leader_id=p.people_id as 'team_leader', w.name as 'wp_name', w.type
			FROM people p, teams t, wppartis wp, wps w
			WHERE p.people_id IN $list AND p.org_id=t.team_id AND wp.team_id=t.team_id AND wp.wp_id=w.wp_id 
			GROUP BY p.people_id";
	if(isset($_GET["order"]) && $_GET["order"]!="nb_news")
		$query.=" ORDER BY ".$_GET["order"];
		
	$result=mysql_query($query, $DBkal);
	while($line = mysql_fetch_assoc($result)){
		printf("<tr><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td><td>%s</td></tr>", $line["name"], $line["fname"],
			$news[$line["people_id"]], $line["status"], $line["team_name"], ($line["team_leader"]=="1")?"yes":"no", $line["type"], $line["wp_name"]);
	
	}
	printf("</table>");
?>
		</textarea>
		<p>Custom controls:<br />
			<input type='button' onclick='alert(editAreaLoader.getValue("example_1"));' value='get value' />
			<input type='button' onclick='editAreaLoader.setValue("example_1", "new_value");' value='set value' />
			<input type='button' onclick='test_getSelectionRange("example_1");' value='getSelectionRange' />
			<input type='button' onclick='test_setSelectionRange("example_1");' value='setSelectionRange' />
			<input type='button' onclick='test_getSelectedText("example_1");' value='getSelectedText' />
			<input type='button' onclick='test_setSelectedText("example_1");' value='setSelectedText' />
			<input type='button' onclick='editAreaLoader.insertTags("example_1", "[OPEN]", "[CLOSE]");' value='insertTags' />
			<input type='button' onclick='toogle_editable("example_1");' value='Toggle readonly mode' />
		</p>
	</fieldset>
	<fieldset>
		<legend>Example 2</legend>
		<p>Multi file mode example with syntax selection option.</p>
		<textarea id="example_2" style="height: 250px; width: 100%;" name="test_2">
		</textarea>
		<p>Custom controls:<br />
			<input type='button' onclick='open_file1()' value='open file 1' />
			<input type='button' onclick='open_file2()' value='open file 2' />
			<input type='button' onclick='close_file1()' value='close file 1' />
		</p>
	</fieldset>
	<fieldset>
		<legend>Example 3</legend>
		<p>Test in French with css syntax, verdana font, smaller default font size, toggle disabled, vertical only resize, custom toolbar, visual keyboard plugin, save and load callback examples.</p>
<textarea id="example_3" style="height: 350px; width: 100%;" name="test_3">
/* toolbar buttons (inspired from tinyMCE ones)*/
.editAreaButtonNormal, .editAreaButtonOver, .editAreaButtonDown, .editAreaSeparator, .editAreaSeparatorLine, .editAreaButtonDisabled, .editAreaButtonSelected {
	border: 0px; margin: 0px; padding: 0px; background: transparent;
	margin-top: 0px;
	margin-left: 1px;
	padding: 0px;
}

.editAreaButtonNormal {
	border: 1px solid #ECE9D8 !important;
	cursor: pointer;
}

.editAreaButtonOver {
	border: 1px solid #0A246A !important;
	cursor: pointer;
	background-color: #B6BDD2;
}

.editAreaButtonDown {
	cursor: pointer;
	border: 1px solid #0A246A !important;
	background-color: #8592B5;
}

.editAreaButtonSelected {
	border: 1px solid #C0C0BB !important;
	cursor: pointer;
	background-color: #F4F2E8;
}

.editAreaButtonDisabled {
	filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
	-moz-opacity:0.3;
	opacity: 0.3;
	border: 1px solid #F0F0EE !important;
	cursor: pointer;
}

.editAreaSeparatorLine {
	margin: 1px 2px;
	background-color: #C0C0BB;
	width: 2px;
	height: 18px;
}		
</textarea>
	</fieldset>
	<fieldset>
		<legend>example 4</legend>
		<p>Test in German with Python syntax, toggle enabled for a later display, with highlight not enabled by default, without resizing possibility (but with larger minimum height when editor is toggled), and with tabs replaced by 4 spaces.</p>
<textarea id="example_4" style="height: 50px; width: 100%;" name="test_4">
import Blender
 
class Python:
	# Instancie un objet
	# cls = la classe Python et non pas l'object instancié
	def __new__(cls):
		pass
	
	# Constructeur de l'objet
	def __init__(self):
		self.items = [1, 2, 3]
	
	# Destructeur
	def __del__(self):
		print "Pourquoi tant de haine ?"
	
	# Utilisé pour : "len(p)"
	def __len__(self):
		return len(self.items)
	
	# Utilisé pour : "p[x]"
	def __getitem__(self, key):
		return self.items[key]
	
	# Utilisé pour : "x in p"
	def __contains__(self, value):
		return (value in self.items)
	
	# Utilisé pour : "for x in p"
	def __iter__(self):
		for x in self.items:
			yield x
</textarea>
	</fieldset>
</form>
</body>
</html>
